import React, { useEffect } from 'react';
import { Form, Modal, Grid, Input, InputNumber } from '@arco-design/web-react';
import * as Model from '@/services/model';
const { useForm } = Form;
const { Row, Col } = Grid;
interface DetailModalProps {
  truckTypeInfo?: Model.Truck | false;
  onCancel: () => void;
  onOk: (params: Model.Truck) => void;
}

export const DetailModal = (props: DetailModalProps) => {
  const [form] = useForm();

  useEffect(() => {
    if (props.truckTypeInfo !== false) {
      form.setFieldsValue(props.truckTypeInfo);
    }
  }, [props.truckTypeInfo]);

  const submit = async () => {
    const res = await form.validate();
    if (res) {
      props.onOk(res);
    }
  };
  return (
    <Modal
      visible={props.truckTypeInfo !== false}
      title={`${
        props.truckTypeInfo && props.truckTypeInfo.id ? '修改' : '新增'
      }车型`}
      mountOnEnter
      unmountOnExit
      onCancel={props.onCancel}
      onOk={submit}
      alignCenter={false}
      okText="提交"
      cancelText="取消"
      style={{ width: 800 }}
    >
      <Form
        form={form}
        labelAlign="right"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item label="车型编号" field="code" required>
              <Input placeholder="请输入车型编号" allowClear />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="车型名称" field="name" required>
              <Input placeholder="请输入车型名称" allowClear />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="车内长(m)" field="length" required>
              <InputNumber placeholder="请输入车内长" step={0.1} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="车内宽(m)" field="width" required>
              <InputNumber placeholder="请输入车内宽" step={0.1} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="车内高(m)" field="height" required>
              <InputNumber placeholder="请输入车内高" step={0.1} />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="车厢可用容积（m³）" field="volumn" required>
              <InputNumber placeholder="请输入车厢可用容积" step={0.1} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
